let cropper = new Cropper($('#image')[0], {
  aspectRatio: 1, // 裁剪图层的横纵比例
  preview: $('.img-preview'),
})

$('.select').on('click', () => {
  $('#file').click()
})

$('#file').on('change', function () {
  // 得到图片临时路径，纯前端实现图片预览
  const url = URL.createObjectURL(this.files[0])
  // 重新设置图片url地址以及重新构建cropper
  cropper.replace(url)
})

// 上传头像
$('.sure').on('click', async () => {
  // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 width和height是canvas标签的大小
  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100,
  })
  // base64也是字符串就是图片的url地址 但是接口中需要base64格式的图片
  let base64Str = canvas.toDataURL('image/jpeg')
  // 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
  base64Str = encodeURIComponent(base64Str)
  const dataStr = 'avatar=' + base64Str
  const res = await reqUpdateAvatarPost(dataStr)
  console.log(res)
  const { status, message } = res
  if (status === 0) {
    layer.msg(message, { time: 1500, icon: 1 })
    // 重新渲染头像
    window.parent.getUserInfo()
    getPic()
  } else {
    layer.msg(message, { time: 1500, icon: 2 })
  }
})
//更改头像框内图片
async function getPic() {
  const res = await reqUserInfoGet()
  const userpic = res.data.user_pic
  if (userpic) {
    $('#image').attr('src', '')
    cropper.replace(userpic)
  }
}
getPic()
